import React from 'react'
import { Card } from 'antd';
import styles from './index.module.css'


interface ToolsGroup {
    name: string
    icon?: React.ComponentType
    items: ToolsItem[],
    onClick?: (item:ToolsItem) => void
}
interface ToolsItem {
    code: string
    text: string
    tip?: string
    jump: string
    icon?: React.ComponentType
}

const toolsGroup: React.FC<ToolsGroup> = (props) => {
    const GIcon = props.icon
    const getItemIcon = (item:ToolsItem) => {
      const Icon = item.icon
      return Icon ? <Icon/> : <></>
    }
    const gridStyle: React.CSSProperties = {
      width: '16.66666%'
    };
    return (
      <div>
        <Card title={
          <div>
            {GIcon? <GIcon/> : ''} {props.name}
          </div>
        }>
            {props.items.map(item => (
                <Card.Grid onClick={() => props.onClick && props.onClick(item)} style={gridStyle} className={styles.gridStyle}>
                  <div className={styles.gridItemW}>
                    {
                      getItemIcon(item)
                    }
                    <span style={{marginLeft: '5px'}}>
                      {item.text}
                    </span>
                  </div>
                </Card.Grid>
            ))}
        </Card>
      </div>
    )
  }

export type ToolsItemType = ToolsItem

export default toolsGroup

